<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_函数的call与bind方法</title>
</head>
<body>
  <script>
    // 返回一个新函数, 当执行新函数时, 内部就调用原函数, 且指定其this为第一个参数对象
    Function.prototype.bind = function (thisObj) {
      console.log('bind')
      // this就是原函数, 也就调用bind方法的函数对象
      return (...args) => { // 返回的新函数
        this.call(thisObj, ...args)
      }
    }

    // const fn2 = fn.bind(obj)
  </script>
  <script>
    /* 
    函数的call与bind方法
      作用: 都是指定函数调用时, 函数中的this => call/bind方法的第一个参数对象
      区别: 
        call: 立即调用函数, 且指定函数中的this为第一个参数对象
        bind: 不会立即执行当前函数, 只做了当前函数中的this绑定
              返回一个新函数, 当执行新函数时, 内部就调用原函数, 且指定其this为第一个参数对象
              只有调用新函数来间接调用原函数, 才有绑定this的效果
      如何选择:
        如果是要立即执行 => 使用call
        如果是后面才执行 => 使用bind
    */
    function fn(a, b) {
      console.log(a, b , this)
    }

    const obj = {m: 1}
    // fn(2, 3)
    // fn.call(obj, 2, 3)
    const fn2 = fn.bind(obj)
    // fn(4, 5)
    // 需要的时候才执行新函数来执行原函数
    setTimeout(() => {
      fn2(2, 3) // 必须调用新函数
    }, 1000);

  </script>
</body>
</html>